<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import type { MenuProps } from 'ant-design-vue';

const router = useRouter()
const route = useRoute()

const current = ref<string[]>(['1']);
const nowPath = {
    "/workPlace":"1",
    "/workPlace/addStaff":"2",
    "/workPlace/addState":"3",
    "/workPlace/searchState":"4"
}


//计算属性，实时返回当前页面选中的key
const selectedKey = computed(()=>{
    const currentPath = route.fullPath
    const key = nowPath[currentPath as keyof typeof nowPath]
    return [key]
})


const items = ref<MenuProps['items']>([
  {
    key: '1',
    label: '任务处理',
    title: '任务处理',
  },
  {
    key: '2',
    label: '添加员工',
    title: '添加员工',
  },
  {
    key: 'sub1',
    label: '库存',
    title: '库存',
    children: [
      {
        key:'3',
        label: '添加库存',
      },
      {
        key:'4',
        label: '查询库存',
      }
    ],
  },
]);


// 点击子菜单调用
function clickHandle(e:any){
  const nowKey = e.key
  switch(nowKey){
    case "1":
        router.push('/workPlace')
        break
    case "2":
        router.push('/workPlace/addStaff')
        break
    case "3":
        router.push('/workPlace/addState')
        break
    case "4":
        router.push('/workPlace/searchState')
  }
}
</script>

<template>
 <div>
    <a-menu v-model:selectedKeys="selectedKey" mode="horizontal" :items="items" class="menu" @click="clickHandle"/>
 </div>
</template>

<style scoped>
.menu{
    display:flex;
    justify-content: center;
}

/* 子菜单样式 */
::v-deep(.ant-menu-overflow-item){
    width:10%;
    font-size: 16px;
    display: flex;
    justify-content: center;
}
</style>